<template>
  <div class="login">
    <div class="top-bar"></div>
    <el-container>
      <el-header height="60px">
        <span>
          <img class="logo" src="@/assets/img/logo.png" />
          <router-link to="main">
            <span>机票预订系统</span>
          </router-link>
        </span>
      </el-header>
      <el-main>
        <register-box></register-box>
      </el-main>
      <el-footer>关于我们</el-footer>
    </el-container>
  </div>
</template>
<script lang="ts">
import RegisterBox from '@/components/Register/RegisterBox.vue';
import HeadBar from '@/components/Common/HeadBar.vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    RegisterBox,
    HeadBar,
  },
  setup() {},
});
</script>
<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.el-container {
  min-width: 1500px;
  padding: 0;
}
.top-bar {
  background-color: $themeColor;
  height: 40px;
  width: 100%;
}
.el-header {
  display: inline;
  margin-left: 30px;
  margin-bottom: 40px;
  padding: 0;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  text-align: center;
  line-height: 60px;
  * {
    float: left;
  }
  span {
    padding: 20px 10px;
    img {
      margin-right: 20px;
      float: left;
      height: 60px;
    }
    span {
      color: black;
      padding: 0;
      margin-left: 30px;
      margin-right: 70px;
      margin-bottom: 20px;
      font-size: 40px;
    }
    ul {
      margin-left: 40px;
      margin-right: 350px;
      padding: 0;
    }
  }
}
.el-footer {
  margin: 30px 0 10px;
  padding: 0;
  background-color: #223c61;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-image: url('../assets/img/main-bg.png');
  height: 650px;
  div {
    position: relative;
    top: 20px;
    left: 280px;
  }
}
a {
  text-decoration: none;
}
</style>
